<route lang="json5" type="page">
    {
      "needLogin": true,
      style: {
        navigationBarTitleText: '充值成功',
      }
    }
</route>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'

// 充值信息
const rechargeInfo = ref({
  amount: '0.00',
  deviceName: '',
  deviceType: '',
  orderId: '',
  time: '',
})

onLoad((options: any) => {
  // 可以从参数中获取充值信息
  if (options) {
    rechargeInfo.value = {
      amount: options.amount || '0.00',
      deviceName: options.deviceName || '',
      deviceType: options.deviceType || '',
      orderId: options.orderId || generateOrderId(),
      time: formatTime(new Date()),
    }
  }
  else {
    // 默认信息
    rechargeInfo.value = {
      amount: '100.00',
      deviceName: '501电表',
      deviceType: '电表',
      orderId: generateOrderId(),
      time: formatTime(new Date()),
    }
  }
})

// 生成订单号
function generateOrderId() {
  return `CZ${Date.now().toString()}`
}

// 格式化时间
function formatTime(date: Date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  const second = String(date.getSeconds()).padStart(2, '0')

  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

// 返回充值管理页面
function goBackToRecharge() {
  uni.navigateBack({
    delta: 2, // 返回两级，跳过充值页面
  })
}

// 查看充值记录
function viewRechargeHistory() {
  uni.navigateTo({
    url: '/pages-admin/admin/operationHistory/index',
  })
}
</script>

<template>
  <view class="success-page min-h-screen bg-gray-50">
    <view class="content-container">
      <!-- 成功图标 -->
      <view class="success-icon">
        <text class="icon-success">
          ✓
        </text>
      </view>

      <!-- 成功标题 -->
      <view class="success-title">
        <text class="title-text">
          充值成功
        </text>
      </view>

      <!-- 充值信息卡片 -->
      <wd-card custom-class="mx-4 mt-6 !p-0">
        <view class="info-container">
          <view class="info-row">
            <text class="info-label">
              充值金额
            </text>
            <text class="info-value amount">
              ¥{{ rechargeInfo.amount }}
            </text>
          </view>

          <view class="info-row">
            <text class="info-label">
              设备名称
            </text>
            <text class="info-value">
              {{ rechargeInfo.deviceName }}
            </text>
          </view>

          <view class="info-row">
            <text class="info-label">
              设备类型
            </text>
            <text class="info-value">
              {{ rechargeInfo.deviceType }}
            </text>
          </view>

          <view class="info-row">
            <text class="info-label">
              订单号
            </text>
            <text class="info-value order-id">
              {{ rechargeInfo.orderId }}
            </text>
          </view>

          <view class="info-row">
            <text class="info-label">
              充值时间
            </text>
            <text class="info-value">
              {{ rechargeInfo.time }}
            </text>
          </view>
        </view>
      </wd-card>

      <!-- 提示信息 -->
      <view class="tips-container">
        <text class="tips-text">
          充值已成功，设备余额将在1-2分钟内更新
        </text>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <wd-button
          type="primary"
          size="large"
          block
          @click="goBackToRecharge"
        >
          返回充值管理
        </wd-button>

        <wd-button
          type="default"
          size="large"
          block
          custom-class="mt-3"
          @click="viewRechargeHistory"
        >
          查看充值记录
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.content-container {
  width: 100%;
  max-width: 600rpx;
  padding: 0 20rpx;
}

.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;

  .icon-success {
    width: 120rpx;
    height: 120rpx;
    background-color: #52c41a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60rpx;
    color: #ffffff;
    font-weight: bold;
  }
}

.success-title {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;

  .title-text {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
  }
}

.info-container {
  padding: 40rpx 30rpx;

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 32rpx;
      color: #666;
    }

    .info-value {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;

      &.amount {
        color: #52c41a;
        font-size: 36rpx;
        font-weight: bold;
      }

      &.order-id {
        font-size: 28rpx;
        color: #999;
        font-family: monospace;
      }
    }
  }
}

.tips-container {
  margin: 40rpx 0;
  padding: 20rpx;
  background-color: #f6ffed;
  border-radius: 8rpx;
  border: 1rpx solid #b7eb8f;

  .tips-text {
    font-size: 28rpx;
    color: #52c41a;
    text-align: center;
    display: block;
  }
}

.action-buttons {
  margin-top: 60rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style>
